<template>
    <div class="common askReply">
        <innerCommon 
            :location="location"
        >
            <template slot="left">
                <span>{{type==0?'问题列表':'回答列表'}}</span>
                <majorModuleCourse
                    @changeCourse="changeCourse"
                ></majorModuleCourse>
                <a-input-search
                    class="searchBox"
                    placeholder="请输入关键字"
                    style="width: 300px"
                    @search="onSearch"
                    enterButton
                    />
            </template>
            <div slot="table" class="tableWrap">
                <topList
                    :topList="topList"
                    :currentItem="currentItem"
                    @changeTop="changeTop"
                ></topList>
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="status" slot-scope="index,record">
                        <span v-if="record.status==0" style="color:orange">未审核</span>
                        <span v-else-if="record.status==1" style="color:green">已通过</span>
                        <span v-else style="color:red">已拒绝</span>
                    </div>
                    <div slot="action" slot-scope="index,record"  class="tableAction">
                        <confirmBox
                            v-if="record.status==0||record.status==2"
                            @handleOk="pass(0,record)"
                            :typeName="'通过'"
                        ></confirmBox>
                        <confirmBox
                            v-if="record.status==0||record.status==1"
                            @handleOk="pass(1,record)"
                            :typeName="'不通过'"
                        ></confirmBox>
                        <confirmBox
                            @handleOk="deleteAsk(record)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="type==0?'问题':'回答'"
                        ></confirmBox>
                        <span @click="toDetail(record)">查看详情</span>
                    </div>
                </a-table>
            </div>
        </innerCommon>

        <!-- 详情弹框 -->
        <detailModal
            :dataList="dataList"
            :detailBox="detailModal"
            @cancel="detailModal=false"
        >
            <div slot="info" class="detailInfo">
                {{this.info}}
            </div>
            <div slot="replyContent" class="detailInfo">
                {{this.replyContent}}
            </div>
        </detailModal>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '问题标题',
        dataIndex: 'title'
    },{
        title: '提问者用户名',
        dataIndex: 'name'
    },{
        title: '所属课程',
        dataIndex: 'courseName',
    },{
        title: '角色',
        dataIndex: 'role',
        width:100
    },{
        title: '申请时间',
        dataIndex: 'createTime',
        width:200
    },{
        title: '审核人',
        dataIndex: 'publisher',
    },{
        title: '审核状态',
        scopedSlots: { customRender: 'status' },
        width:120
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:230
    }
]
import confirmBox from "@/components/common/confirmBox"
import innerCommon from "@/components/common/innerCommon"
import topList from "@/components/common/topList"
import detailModal from "@/components/common/detailModal"
import majorModuleCourse from "@/components/common/majorModuleCourse"
import {getAskListApi,askPublishApi,askRefuseApi,deleteAskApi} from "@/request/api"
import {getReplyListApi,replyPublishApi,replyRefuseApi,deleteReplyApi} from "@/request/api"
export default {
    name:'askReply',
    props:{
        type:String//0 是问题管理 1是回答管理
    },
    components:{innerCommon,topList,confirmBox,detailModal,majorModuleCourse},
    created(){
        this.columns[2].title=this.type==0?'提问者用户名':'回答者用户名'
        this.location=[{
            name:"教学课堂管理",
            path:''
        },{
            name:this.type==0?"问题管理":"回答管理",
            path:this.type==0?'/answer':'/reply'
        }]
        this.init()
    },
    watch:{
        searchInfo:{
            handler(){
                this.init()
            },
            deep:true
        }
    },
    data(){
        return{
            columns,
            location:[],
            currentItem:'1',
            topList:[
                {
                    name:"已通过",
                    id:'1'
                },{
                    name:'待审核',
                    id:'0'
                },{
                    name:'已拒绝',
                    id:'2'
                }
            ],
            list:[],
            pagination:{pageSize:10,total:0,current:1},
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:'',
                courseId:'',
                status:1
            },
            detailModal:false,
            dataList:[],
            info:'',
            replyContent:''
        }
    },
    methods:{
        init(){
            this.getToken(this.type==0?getAskListApi:getReplyListApi,this.searchInfo,res=>{
                
                this.pagination.total=res.data.count
                if(this.type==1){
                    this.list=res.data.rows.map((item,index)=>({
                        ...item,
                        'index':(this.searchInfo.page-1)*10+index+1,
                        'title':item.ask.title,
                        'replyContent':item.content,
                        'content':item.ask.content,
                        'name':item.creator.name&&item.creator.name,
                        'courseName':item.ask.course.title,
                        'role':item.creator.role&&item.creator.role,
                        'publisher':item.publisher&&item.publisher.name,
                    }))
                }else{
                    this.list=res.data.rows.map((item,index)=>({
                        ...item,
                        'index':(this.searchInfo.page-1)*10+index+1,
                        'name':item.creator.name&&item.creator.name,
                        'publisher':item.publisher&&item.publisher.name,
                        'role':item.creator.role&&item.creator.role,
                        'courseName':item.course.title
                    }))
                }
            })
        },
        changeTop(id){
            this.currentItem=id
            this.searchInfo.status=id
            this.pagination.current=1
            this.searchInfo.page=1
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
        },
        pass(type,data){
            let api
            if(this.type==0){
                api=type==0?askPublishApi:askRefuseApi
            }else{
                api=type==0?replyPublishApi:replyRefuseApi
            }
            this.getToken(api,this.type==0?{'askId':data.id}:{'replyId':data.id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        deleteAsk(data){
            this.getToken(this.type==0?deleteAskApi:deleteReplyApi,this.type==0?{'askId':data.id}:{'replyId':data.id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        changeCourse(data){
            if(data.length==3){
                this.searchInfo.courseId=data[2]
            }else{
                this.searchInfo.courseId=''
            }
        },
        onSearch(data){
            this.searchInfo.keyword=data
            this.searchInfo.page=1
            this.pagination.current=1
        },
        toDetail(data){
            this.detailModal=true
            this.dataList=[
                {
                    'name':'用户名',
                    'info':data.creator.name
                },{
                    'name':'账号',
                    'info':data.creator.account
                },{
                    'name':'真实姓名',
                    'info':data.creator.realname
                },{
                    'name':'用户角色',
                    'info':data.creator.role
                },{
                    'name':'手机号',
                    'info':data.creator.telephone
                },{
                    'name':'所在单位',
                    'info':data.creator.instituteName
                },{
                    'name':'问题标题',
                    'info':data.title
                },{
                    'name':'问题内容',
                    'scopedSlots':{'customRender':'info'}
                }
            ]
            this.info=data.content
            this.replyContent=data.replyContent
            if(this.type==1){
                this.dataList.push(
                    {
                        'name':'回答内容',
                        'scopedSlots':{'customRender':'replyContent'},
                        'info':data.replyContent
                    }
                )
            }
        }
        
    }
}
</script>
<style lang="stylus" scoped>
.askReply
    .content
        .tableWrap
            position:relative
.detailInfo
    border:1px solid #ddd;
    text-align:justify;
    padding:5px;
    max-height:250px;
    overflow:auto;
</style>